<template>
  <div class="FooterMusic">
    <div class="footerLeft" @click="updateDetailShow">
      <img :src="playList[playListIndex].al.picUrl" alt="" />
      <div>
        <p>{{ playList[playListIndex].name }}</p>
        <span>横滑切换上下首</span>
      </div>
    </div>
    <div class="footerRight">
      <svg class="icon" aria-hidden="true" v-if="isbtnShow" @click="play">
        <use xlink:href="#icon-bofang" ></use>
      </svg>
      <svg class="icon" aria-hidden="true" v-else @click="play">
        <use xlink:href="#icon-bofangzhong" ></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-bofangduilie"></use>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"
    ></audio>
    <van-popup v-model:show="detailShow" position="right" :style="{ height: '100%',width:'100%' }" >
      <MusicDetail :musicList="playList[playListIndex]" :play="play" :isbtnShow="isbtnShow" :addDuration="addDuration"/>
    </van-popup>
  </div>
</template>

<script>
import MusicDetail from '@/components/item/MusicDetail.vue'
import { mapMutations, mapState } from "vuex";
export default {
  data(){
    return {
      interVal:0
    }
  },
  computed: {
    ...mapState(["playList", "playListIndex", "isbtnShow",'detailShow']),
  },
  updated(){
    this.$store.dispatch("getLyric",this.playList[this.playListIndex].id)
    this.addDuration()
  },
  mounted() {
     this.$store.dispatch("getLyric",this.playList[this.playListIndex].id)
    console.log(this.$refs);
    // this.updateTime()
  },
  methods: {
    play: function () {
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.updateIsbtnShow(false);
        this.updateTime()
      } else {
        this.$refs.audio.pause();
        this.updateIsbtnShow(true);
        clearInterval(this.interVal)
      }
    },
    addDuration:function(){
      this.updateDuration(this.$refs.audio.duration)
    },

    ...mapMutations(["updateIsbtnShow",'updateDetailShow','updateCurrentTime','updateDuration']),
    updateTime:function(){
     this.interVal= setInterval(()=>{
        this.updateCurrentTime(this.$refs.audio.currentTime)
      },1000)
    }
  },
  watch:{
    playListIndex:function(){
      this.$refs.audio.autoplay=true
      if(this.$refs.audio.paused){
        this.updateIsbtnShow(false)
      }
    },
    playList:function(){
      if(this.isbtnShow){
        this.$refs.audio.autoplay=true
        this.updateIsbtnShow(false)
      }
    }
  },
  components:{
    MusicDetail
  }
};
</script>

<style lang="less" scoped>
.FooterMusic {
  width: 100%;
  height: 1rem;
  //   color: #fff;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #999;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  .footerLeft {
    width: 60%;
    height: 100%;
    display: flex;

    justify-content: space-around;
    align-items: center;
    align-items: center;
    img {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }
  }
  .footerRight {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
}
</style>